﻿@{
    ViewBag.Title = "BieuDoCapThe";
}
<div class="box span8" ontablet="span12" ondesktop="span8">
    <div class="box-header">
        <h2><i class="icon-signal"></i><span class="break"></span>Biểu đồ lịch sử cấp thẻ</h2>
        <div class="box-icon">
            <a href="#" class="btn-setting"><i class="icon-wrench"></i></a>
            <a href="#" class="btn-minimize"><i class="icon-chevron-up"></i></a>
            <a href="#" class="btn-close"><i class="icon-remove"></i></a>
        </div>
    </div>
    <div class="box-content">
        <div id="thevip-chart" class="center" style="height: 185px"></div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "@Url.Action("jsBieuDoCapThe", "ThongKe")",
            success: function (msg) {
                /*Prosess*/
                var obj = JSON.parse(msg);
                var tem = obj[9][0];
                //alert(tem.tenThe);
                //alert(obj.length);
                //alert(obj[1].length);
                var l = obj[1].length;
                var datathe = new Array(l);
                var mauthe = new Array(l);
                var tenthe = new Array(l);
                var objs = new Array(l);
                for (var i = 0; i < l; i++) {
                    var mo = new Array(15);
                    var tt;
                    var mt;
                    var ob={};
                    for(m in obj) {
                        mo[m - 1] = new Array(2);
                        mo[m - 1][0] = m;
                        mo[m - 1][1] = obj[m][i].soluong;
                        tt = obj[m][i].tenThe;
                        mt = obj[m][i].mauThe;
                    }
                    datathe[i] = mo;
                    mauthe[i] = mt;
                    tenthe[i] = tt;
                    ob.data = datathe[i];
                    ob.label = tenthe[i];
                    objs[i] = ob;
                }
                /* ---------- Chart with points ---------- */
                if ($("#thevip-chart").length) {
                    /*var thedo = [[1, 5], [2, 10], [3, 15], [4, 20], [5, 25], [6, 30], [7, 35], [8, 40], [9, 45], [10, 50], [11, 55], [12, 60], [13, 65], [14, 70], [15, 75], [16, 80], [17, 85], [18, 90], [19, 85], [20, 80], [21, 75], [22, 80], [23, 75], [24, 70], [25, 65], [26, 75], [27, 80], [28, 85], [29, 90]];
                    var thekimcuong = [[1, 10], [2, 10], [3, 10], [4, 1], [5, 1], [6, 4], [7, 5], [8, 6], [9, 6], [10, 8], [11, 9], [12, 10], [13, 11], [14, 12], [15, 13], [16, 14], [17, 15], [18, 15], [19, 16], [20, 17], [21, 18], [22, 19], [23, 20], [24, 21], [25, 14], [26, 24], [27, 25], [28, 26], [29, 27]];*/

                    var plot = $.plot($("#thevip-chart"),
                           objs,
                           {
                               series: {
                                   lines: {
                                       show: true,
                                       lineWidth: 3,
                                       fill: true, fillColor: { colors: [{ opacity: 0.08 }, { opacity: 0.01 }] }
                                   },
                                   points: { show: true },
                                   shadowSize: 2
                               },
                               grid: {
                                   hoverable: true,
                                   clickable: true,
                                   tickColor: "#eee",
                                   borderWidth: 0
                               },
                               colors: mauthe,//["#FA5833", "#2FABE9"],
                               xaxis: { ticks: 11, tickDecimals: 0 },
                               yaxis: { ticks: 11, tickDecimals: 0 },
                           });

                    function showTooltip(x, y, contents) {
                        $('<div id="tooltip">' + contents + '</div>').css({
                            position: 'absolute',
                            display: 'none',
                            top: y-45,
                            left: x,
                            border: '1px solid #fdd',
                            marginLeft: '-180px',
                            zIndex:'99999',
                            padding: '2px',
                            'background-color': '#dfeffc',
                            opacity: 0.80
                        }).appendTo("body").fadeIn(200);
                    }

                    var previousPoint = null;
                    $("#thevip-chart").bind("plothover", function (event, pos, item) {
                        $("#x").text(pos.x.toFixed(2));
                        $("#y").text(pos.y.toFixed(2));

                        if (item) {
                            if (previousPoint != item.dataIndex) {
                                previousPoint = item.dataIndex;

                                $("#tooltip").remove();
                                var x = item.datapoint[0].toFixed(0),
                                    y = item.datapoint[1].toFixed(0);

                                showTooltip(item.pageX, item.pageY,
                                            item.series.label + " tháng " + x + " là " + y);
                            }
                        }
                        else {
                            $("#tooltip").remove();
                            previousPoint = null;
                        }
                    });



                    $("#sincos").bind("plotclick", function (event, pos, item) {
                        if (item) {
                            $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
                            plot.highlight(item.series, item.datapoint);
                        }
                    });
                }



                /* ---------- Chart with points ---------- */
                if ($("#sincos").length) {
                    var sin = [], cos = [];

                    for (var i = 0; i < 14; i += 0.5) {
                        sin.push([i, Math.sin(i) / i]);
                        cos.push([i, Math.cos(i)]);
                    }

                    var plot = $.plot($("#sincos"),
                           [{ data: sin, label: "sin(x)/x" }, { data: cos, label: "cos(x)" }], {
                               series: {
                                   lines: {
                                       show: true,
                                       lineWidth: 2,
                                   },
                                   points: { show: true },
                                   shadowSize: 2
                               },
                               grid: {
                                   hoverable: true,
                                   clickable: true,
                                   tickColor: "#dddddd",
                                   borderWidth: 0
                               },
                               yaxis: { min: -1.2, max: 1.2 },
                               colors: ["#FA5833", "#2FABE9"]
                           });

                    function showTooltip(x, y, contents) {
                        $('<div id="tooltip">' + contents + '</div>').css({
                            position: 'absolute',
                            display: 'none',
                            top: y-45,
                            left: x,
                            border: '1px solid #fdd',
                            padding: '2px',
                            marginLeft: '-180px',
                            zIndex: '99999',
                            'background-color': '#dfeffc',
                            opacity: 0.80
                        }).appendTo("body").fadeIn(200);
                    }

                    var previousPoint = null;
                    $("#sincos").bind("plothover", function (event, pos, item) {
                        $("#x").text(pos.x.toFixed(2));
                        $("#y").text(pos.y.toFixed(2));

                        if (item) {
                            if (previousPoint != item.dataIndex) {
                                previousPoint = item.dataIndex;

                                $("#tooltip").remove();
                                var x = item.datapoint[0].toFixed(0),
                                    y = item.datapoint[1].toFixed(0);

                                showTooltip(item.pageX, item.pageY,
                                            item.series.label + " tháng " + x + " là " + y);
                            }
                        }
                        else {
                            $("#tooltip").remove();
                            previousPoint = null;
                        }
                    });



                    $("#sincos").bind("plotclick", function (event, pos, item) {
                        if (item) {
                            $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
                            plot.highlight(item.series, item.datapoint);
                        }
                    });
                }

                /* ---------- Flot chart ---------- */
                if ($("#flotchart").length) {
                    var d1 = [];
                    for (var i = 0; i < Math.PI * 2; i += 0.25)
                        d1.push([i, Math.sin(i)]);

                    var d2 = [];
                    for (var i = 0; i < Math.PI * 2; i += 0.25)
                        d2.push([i, Math.cos(i)]);

                    var d3 = [];
                    for (var i = 0; i < Math.PI * 2; i += 0.1)
                        d3.push([i, Math.tan(i)]);

                    $.plot($("#flotchart"), [
                        { label: "sin(x)", data: d1 },
                        { label: "cos(x)", data: d2 },
                        { label: "tan(x)", data: d3 }
                    ], {
                        series: {
                            lines: { show: true },
                            points: { show: true }
                        },
                        xaxis: {
                            ticks: [0, [Math.PI / 2, "\u03c0/2"], [Math.PI, "\u03c0"], [Math.PI * 3 / 2, "3\u03c0/2"], [Math.PI * 2, "2\u03c0"]]
                        },
                        yaxis: {
                            ticks: 10,
                            min: -2,
                            max: 2
                        },
                        grid: {
                            tickColor: "#dddddd",
                            borderWidth: 0
                        },
                        colors: ["#FA5833", "#2FABE9", "#FABB3D"]
                    });
                }

                /* ---------- Stack chart ---------- */
                if ($("#stackchart").length) {
                    var d1 = [];
                    for (var i = 0; i <= 10; i += 1)
                        d1.push([i, parseInt(Math.random() * 30)]);

                    var d2 = [];
                    for (var i = 0; i <= 10; i += 1)
                        d2.push([i, parseInt(Math.random() * 30)]);

                    var d3 = [];
                    for (var i = 0; i <= 10; i += 1)
                        d3.push([i, parseInt(Math.random() * 30)]);

                    var stack = 0, bars = true, lines = false, steps = false;

                    function plotWithOptions() {
                        $.plot($("#stackchart"), [d1, d2, d3], {
                            series: {
                                stack: stack,
                                lines: { show: lines, fill: true, steps: steps },
                                bars: { show: bars, barWidth: 0.6 },
                            },
                            colors: ["#FA5833", "#2FABE9", "#FABB3D"]
                        });
                    }

                    plotWithOptions();

                    $(".stackControls input").click(function (e) {
                        e.preventDefault();
                        stack = $(this).val() == "With stacking" ? true : null;
                        plotWithOptions();
                    });
                    $(".graphControls input").click(function (e) {
                        e.preventDefault();
                        bars = $(this).val().indexOf("Bars") != -1;
                        lines = $(this).val().indexOf("Lines") != -1;
                        steps = $(this).val().indexOf("steps") != -1;
                        plotWithOptions();
                    });
                }

                /* ---------- Pie chart ---------- */
                var data = [
                { label: "Internet Explorer", data: 12 },
                { label: "Mobile", data: 27 },
                { label: "Safari", data: 85 },
                { label: "Opera", data: 64 },
                { label: "Firefox", data: 90 },
                { label: "Chrome", data: 112 }
                ];

                if ($("#piechart").length) {
                    $.plot($("#piechart"), data,
                    {
                        series: {
                            pie: {
                                show: true
                            }
                        },
                        grid: {
                            hoverable: true,
                            clickable: true
                        },
                        legend: {
                            show: false
                        },
                        colors: ["#FA5833", "#2FABE9", "#FABB3D", "#78CD51"]
                    });

                    function pieHover(event, pos, obj) {
                        if (!obj)
                            return;
                        percent = parseFloat(obj.series.percent).toFixed(2);
                        $("#hover").html('<span style="font-weight: bold; color: ' + obj.series.color + '">' + obj.series.label + ' (' + percent + '%)</span>');
                    }
                    $("#piechart").bind("plothover", pieHover);
                }

                /* ---------- Donut chart ---------- */
                if ($("#donutchart").length) {
                    $.plot($("#donutchart"), data,
                    {
                        series: {
                            pie: {
                                innerRadius: 0.5,
                                show: true
                            }
                        },
                        legend: {
                            show: false
                        },
                        colors: ["#FA5833", "#2FABE9", "#FABB3D", "#78CD51"]
                    });
                }




                // we use an inline data source in the example, usually data would
                // be fetched from a server
                var data = [], totalPoints = 300;
                function getRandomData() {
                    if (data.length > 0)
                        data = data.slice(1);

                    // do a random walk
                    while (data.length < totalPoints) {
                        var prev = data.length > 0 ? data[data.length - 1] : 50;
                        var y = prev + Math.random() * 10 - 5;
                        if (y < 0)
                            y = 0;
                        if (y > 100)
                            y = 100;
                        data.push(y);
                    }

                    // zip the generated y values with the x values
                    var res = [];
                    for (var i = 0; i < data.length; ++i)
                        res.push([i, data[i]])
                    return res;
                }

                // setup control widget
                var updateInterval = 30;
                $("#updateInterval").val(updateInterval).change(function () {
                    var v = $(this).val();
                    if (v && !isNaN(+v)) {
                        updateInterval = +v;
                        if (updateInterval < 1)
                            updateInterval = 1;
                        if (updateInterval > 2000)
                            updateInterval = 2000;
                        $(this).val("" + updateInterval);
                    }
                });

                /* ---------- Realtime chart ---------- */
                if ($("#serverload").length) {
                    var options = {
                        series: { shadowSize: 1 },
                        lines: { show: true, lineWidth: 0.4, fill: true, fillColor: { colors: [{ opacity: 0.1 }, { opacity: 1 }] } },
                        yaxis: { min: 0, max: 100, tickFormatter: function (v) { return v + "%"; } },
                        xaxis: { show: false },
                        colors: ["#FA5833"],
                        grid: {
                            tickColor: "#dddddd",
                            borderWidth: 0,
                        },
                    };
                    var plot = $.plot($("#serverload"), [getRandomData()], options);
                    function update() {
                        plot.setData([getRandomData()]);
                        // since the axes don't change, we don't need to call plot.setupGrid()
                        plot.draw();

                        setTimeout(update, updateInterval);
                    }

                    update();
                }

                if ($("#realtimechart").length) {
                    var options = {
                        series: { shadowSize: 1 },
                        lines: { fill: true, fillColor: { colors: [{ opacity: 1 }, { opacity: 0.1 }] } },
                        yaxis: { min: 0, max: 100 },
                        xaxis: { show: false },
                        colors: ["#F4A506"],
                        grid: {
                            tickColor: "#dddddd",
                            borderWidth: 0
                        },
                    };
                    var plot = $.plot($("#realtimechart"), [getRandomData()], options);
                    function update() {
                        plot.setData([getRandomData()]);
                        // since the axes don't change, we don't need to call plot.setupGrid()
                        plot.draw();

                        setTimeout(update, updateInterval);
                    }

                    update();
                }
                /*ket thuc chart*/
                
            },
            error: function (msg) {
                alert("loi");
            }
        });
    });

</script>
